<template>
  <z-paging ref="paging" safe-area-inset-bottom auto-show-system-loading v-model="dataList" @query="queryList">
    <view slot="top">
      <navbar title="我的选材"></navbar>
    </view>
    <view class="list">
      <view class="item" v-for="item in dataList" @click="toDetail(item)">
        <c-image :src="item.image" width="150rpx" height="150rpx" radius="16rpx" mode="aspectFill"/>
        <view class="info">
          <view class="head">
            <text class="order-no">{{ item.no }}</text>
            <text class="num muted">x{{ item.quantity }}</text>
          </view>
          <view class="price-label">合计:
            <text class="price">￥
              <text>{{ item.totalPrice }}</text>
            </text>
          </view>
          <view class="bottom flex row-between">
            <view class="fz-24 muted">{{ item.date }}</view>
            <view class="btn">查看详情</view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script>
import {orderList} from "@/api/my";

export default {
  data() {
    return {
      dataList: [],
    };
  },
  methods: {
    queryList(pageNum, pageSize) {
      orderList({pageNum, pageSize}).then((res) => {
        this.$refs.paging.complete((res.records || []).map(item => {
          item.date = this.$utils.dateFormat(item.createTime, "yyyy-MM-dd hh:mm")
          return item
        }));
      })
    },
    toDetail(item) {
      uni.setStorageSync("orderDetail", item);
      uni.navigateTo({
        url: `/pages/my/order/detail?id=${item.id}`,
      });
    }
  },
}
</script>

<style lang="scss">
@import "@/static/styles/minix.scss";

page {
  background: #fff;
}

.list {
  padding: 0 20rpx;

  .item {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-top: 20rpx;

    .c-image {
      margin-right: 20rpx;
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .head {
        @include flex-between;
        font-size: 24rpx;
        .order-no {
          font-size: 30rpx;
          font-weight: bold;
        }
      }

      .price-label {
        font-size: 24rpx;

        .price {
          color: #e0b883;
          margin-right: 10rpx;

          text {
            font-size: 30rpx;
          }
        }
      }

      .bottom {
        .btn {
          font-size: 24rpx;
          color: #e0b883;
          border: 1px solid #e0b883;
          padding: 0 20rpx;
          height: 44rpx;
          line-height: 44rpx;
          border-radius: 44rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>
